<template>
  <view class="fahuo">
    <view class="fahuo_main">
      <view
        class="topA"
        v-if="Object.keys(addressList).length == 0"
        @click="onClickHandle('', 'toAddress', {})"
      >
        <view class="top_box">
          <u-icon
            name="plus-circle"
            color="#A084F0"
            size="18"
            class="left"
          ></u-icon>
          <view class="add_text">添加收货地址</view>
          <u-icon
            name="arrow-right"
            color="#222222"
            size="18"
            class="right"
          ></u-icon>
        </view>
      </view>
      <view
        class="topB"
        v-if="Object.keys(addressList).length > 0"
        @click="onClickHandle('', 'toAddress', {})"
      >
        <view class="top_box">
          <view class="left" v-if="addressList.is_default == '1'">默认</view>
          <view class="center">
            <view class="top">
              <text class="first">{{ addressList.consignee }}</text>
              <text class="last">{{ addressList.phone }}</text>
            </view>
            <view class="bottom"
              >{{ addressList.province_name }}{{ addressList.city_name
              }}{{ addressList.area_name }}{{ addressList.address }}</view
            >
          </view>
          <u-icon
            name="arrow-right"
            color="#222222"
            size="18"
            class="right"
          ></u-icon>
        </view>
      </view>
      <view class="main">
        <view class="title">发货商品</view>
        <view class="box" v-for="(item, index) in boxData.list" :key="index">
          <img :src="item.goods_image_text" alt="" />
          <view class="right_box">
            <view class="biaoti">{{ item.goods_name }}</view>
            <view class="biaoqian">
              <text
                class="biaoqian_box"
                v-for="(data, index) in item.service_lab"
                :key="index"
                >{{ data }}</text
              >
            </view>
            <view class="shuoming">不支持7日内无理由退货</view>
            <view class="price_line">
              <view class="price">
                <text class="fuhao">￥</text>
                <text class="price_num">{{ item.original_price }}</text>
              </view>
              <view class="shu_box">
                <text class="fuhao">x</text>
                <text class="shuliang">{{ item.number }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="line">
          <view class="left">发货时间</view>
          <view class="right">您的商品将在7日内发出</view>
        </view>
        <view class="line">
          <view class="left">运费</view>
          <view class="right">¥{{ boxData.postage }}</view>
        </view>
        <view class="line">
          <view class="left">优惠券</view>
          <view
            class="right"
            v-if="!youhuiquan"
            @click="onClickHandle('', 'showUseCoupon', {})"
          >
            <text v-if="!isSelectCoupon">请选择优惠券</text>
            <text v-if="isSelectCoupon">已减￥50</text>
            <u-icon
              name="arrow-right"
              color="#8C8C8C"
              size="18"
              class="icon"
            ></u-icon>
          </view>
          <!-- <view class="right" v-if="youhuiquan">暂无优惠券可用</view> -->
        </view>
        <view class="beizhu">
          <view class="left">备注</view>
          <input
            type="text"
            placeholder-style="color:#8C8C8C;;font-size: 18rpx;"
            placeholder="选填，建议留言前与商家沟通确认"
            v-model="remark"
          />
        </view>
        <view class="bottom">
          <text class="xiaoji">共1件商品 小计：</text>
          <text class="fuhao">￥</text>
          <text class="price">{{ boxData.postage }}</text>
        </view>
      </view>
      <view class="shuoming_box">
        <view class="title">运费说明</view>
        <!-- <rich-text :nodes="yunPrice"></rich-text> -->
        <view class="text"
          >满三件包邮。可配送地区为中国大陆地区（除特殊偏远地区），收件地址在此之外的区域请勿下单。</view
        >
      </view>
      <view class="mustKnow">
        <switch
          type="checkbox"
          :checked="switch2Checked"
          @change="switch2Change"
          color="#A084F0"
          class="switch"
        />
        <text class="left">我已阅读并同意</text>
        <text class="right" @click="onClickHandle('', 'letllustrate', {})"
          >《用户购买须知》</text
        >
      </view>
      <view class="pay">
        <view class="heji">合计:</view>
        <view class="fuhao">￥</view>
        <view class="sum_price">{{ boxData.postage }}</view>
        <view
          class="pay_btn"
          @click="onClickHandle('', 'toPay', {})"
          v-if="boxData.postage > 0"
          >立即支付</view
        >
        <view
          class="quePay_btn"
          @click="onClickHandle('', 'toFahuo', {})"
          v-if="boxData.postage == 0"
          >确认发货</view
        >
      </view>
    </view>
    <shopro-pay-model
      @change-pay-mod="changePayMod"
      @payed="onPayed"
      v-if="payModOpen"
	  :iscoupon="1"
      activity-type="freight"
      :details="payDetails"
    ></shopro-pay-model>
    <u-popup
      mode="bottom"
      border-radius="20"
      closeable
      v-model="showIllustrate"
    >
      <view class="content-illustrate">
        <scroll-view scroll-y="true" style="height: 60vh">
          <!-- <view v-html="illustrate"> </view> -->
          <rich-text :nodes="illustrate"></rich-text>
        </scroll-view>
      </view>
    </u-popup>
   <!-- <shoproUseCoupon
      v-if="showCoupon"
      :show="showCoupon"
      @noShow="noshowCoupon"
      @useCoupon="useCoupon"
    ></shoproUseCoupon> -->
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
//import shoproUseCoupon from '@/components/shopro-coupon/shopro-use-coupon.vue';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  //components: { shoproUseCoupon },
  data: () => ({
    switch2Checked: false,
    youhuiquan: false,
    youfei: true,
    ids: {},
    remark: '', //备注
    pay_type: '', //支付方式:wechat=微信支付,alipay=支付宝,wallet=钱包支付,score=积分支付
    platform: '', //平台:H5=H5,wxOfficialAccount=微信公众号,wxMiniProgram=微信小程序,App=App
    address_id: '', //收货地址id
    boxData: {},
    addressList: {},
    order_sn: '', //订单号
    payModOpen: false,
    payDetails: {},
    illustrate: '',
    showIllustrate: false,
    yunPrice: '',
    showCoupon: false,
    isSelectCoupon: false,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  created() {
    // uni.setStorageSync('addressKey', {});
  },
  mounted() {
    // this.ids = this.$Route.query.ids;
    // this.affirm_deliverList();
    // this.getAddress();
  },
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    //盒柜传过来的商品id
    this.ids = this.$Route.query.ids;
    //获取商品列表
    this.affirm_deliverList();
    //运费说明
    this.getyunPrice();
    //一进来页面首先判断本地存储时候存储着上一次使用的地址
    let ifStorage = uni.getStorageSync('addressKey') || {};
    //本地存储有地址直接用，没有的话就请求接口获取
    if (JSON.stringify(ifStorage) != '{}') {
      this.addressList = ifStorage;
    } else {
      this.getAddress();
    }
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapMutations(['CartOnshow']),
    //获取地址列表
    getAddress() {
      return new Promise((resolve, reject) => {
        this.$http('address.list', {}, '请稍等').then((res) => {
          if (res.code === 1) {
            if (res.data.length > 0) {
              this.addressList = {};
              //如果有默认地址选用默认地址，否则选用第一条地址

              res.data.forEach((item, index) => {
                // 有默认地址
                if (item.is_default == '1') {
                  this.addressList = res.data[index];
                } else {
                }
              });
              //无默认地址
              if (Object.keys(this.addressList) == 0) {
                this.addressList = res.data[0];
              }

              //处理手机号码
              if (this.addressList.phone.length > 0) {
                this.addressList.phone =
                  this.addressList.phone.substr(0, 3) +
                  '****' +
                  this.addressList.phone.substr(7);
              }
            } else {
              this.addressList = {};
            }
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    //获取发货商品列表
    affirm_deliverList() {
      return new Promise((resolve, reject) => {
        this.$http('v1.affirm_deliverList', { ids: this.ids }, '请稍等').then(
          (res) => {
            if (res.code === 1) {
              this.boxData = res.data;
              resolve(res.data);
            } else {
              reject();
            }
          }
        );
      });
    },
    //支付接口
    toGetpay() {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.prepay',
          { order_sn: this.order_sn, payment: 'wallet' },
          '请稍等'
        ).then((res) => {
          if (res.code === 1) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    switch2Change() {
      this.switch2Checked = !this.switch2Checked;
    },

    // 获取购买须知
    async letllustrate() {
      await this.getProtocol();
      this.showIllustrate = true;
    },
    getProtocol() {
      this.$http('v1.getProtocol', {
        id: 2,
      })
        .then((res) => {
          if (res.code === 1) {
            this.illustrate = res.data[0].content;
          }
        })
        .catch(() => {});
    },
    //获取运费说明
    getyunPrice() {
      this.$http('v1.getProtocol', {
        id: 3,
      })
        .then((res) => {
          if (res.code === 1) {
            this.yunPrice = res.data[0].content;
          }
        })
        .catch(() => {});
    },
    //确认发货并立即支付
    async toPay() {
      if (this.switch2Checked == true) {
        if (JSON.stringify(this.addressList) != '{}') {
          //确认发货
          let res = await this.$http(
            'v1.yesDeliver',
            {
              ids: this.ids, //商品id集
              remark: this.remark, //备注
              address_id: this.addressList.id, //收货地址id
            },
            '请稍等'
          );
          if (res.code === 1) {
            this.order_sn = res.data.order_sn;
            this.payModOpen = true;
            this.payDetails.total_amount = this.boxData.postage;
            this.payDetails.discounts_amount = 0.0;
            this.payDetails.original_amount = this.boxData.postage;
            this.payDetails.order_sn = this.order_sn;
            this.payDetails.money = res.data.money;
          }
        } else {
          uni.showToast({
            title: '未添加收货地址',
            duration: 2000,
            icon: 'error',
          });
        }
      } else {
        uni.showToast({
          title: '未勾选购买须知',
          duration: 2000,
          icon: 'error',
        });
      }
    },
    //确认发货不用支付
    async toFahuo() {
      if (this.switch2Checked == true) {
        if (JSON.stringify(this.addressList) != '{}') {
          //确认发货
          let res = await this.$http(
            'v1.yesDeliver',
            {
              ids: this.ids, //商品id集
              remark: this.remark, //备注
              address_id: this.addressList.id, //收货地址id
            },
            '请稍等'
          );
          if (res.code === 1) {
            this.CartOnshow(true);
            //将本次使用的地址存入本地存储
            uni.setStorageSync('addressKey', this.addressList);
            uni.navigateTo({
              url: 'pages/hegui/components/successFahuo',
            });
          }
        } else {
          uni.showToast({
            title: '未添加收货地址',
            duration: 2000,
            icon: 'error',
          });
        }
      } else {
        uni.showToast({
          title: '未勾选购买须知',
          duration: 2000,
          icon: 'error',
        });
      }
    },
    //跳转修改地址
    toAddress() {
      this.$Router.push({
        path: '/pages/user/address/list',
        query: { selectAd: true },
      });
    },
    //选择优惠券弹出层
    showUseCoupon() {
      this.showCoupon = true;
    },
    noshowCoupon(val) {
      this.showCoupon = val;
    },
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'toPay':
            this.toPay();
            break;
          case 'toFahuo':
            this.toFahuo();
            break;
          case 'toAddress':
            this.toAddress();
            break;
          case 'letllustrate':
            this.letllustrate();
            break;
          case 'showUseCoupon':
            this.showUseCoupon();
            break;
        }
      });
    },
    // 显示隐藏支付
    changePayMod(ev) {
      this.payModOpen = ev;
      this.payDetails = {};
    },
    //支付结果
    onPayed() {
      this.payModOpen = false;
      this.CartOnshow(true);
      //将本次使用的地址存入本地存储
      uni.setStorageSync('addressKey', this.addressList);
      this.$Router.push({
        path: '/pages/hegui/components/successFahuo',
      });
    },
    //使用优惠券
    useCoupon() {
      this.showCoupon = false;
      this.isSelectCoupon = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.fahuo {
  .fahuo_main {
    padding: 20rpx 54rpx 140rpx;
    .topA {
      width: 640rpx;
      height: 118rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding-top: 50rpx;
      padding-left: 40rpx;
      padding-right: 40rpx;
      box-sizing: border-box;
      background-image: url(./images/xuxian.png);
      background-size: cover;
      background-repeat: no-repeat;
      .top_box {
        width: 100%;
        height: 20rpx;
        align-items: center;
        .left {
          float: left;
          margin-right: 14rpx;
        }
        .add_text {
          float: left;
          font-size: 21rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #3d3d3d;
          line-height: 20rpx;
        }
        .right {
          float: right;
        }
      }
    }
    .topB {
      width: 640rpx;
      height: 118rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding-left: 4rpx;
      padding-top: 4rpx;
      padding-right: 4rpx;
      box-sizing: border-box;
      background-image: url(./images/xuxian.png);
      background-size: cover;
      background-repeat: no-repeat;
      .top_box {
        height: 111rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        .left {
          width: 48rpx;
          height: 22rpx;
          background: #d5c7ff;
          border-radius: 6rpx 6rpx 6rpx 6rpx;
          font-size: 14rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #3d3d3d;
          line-height: 22rpx;
          text-align: center;
          margin-left: 35rpx;
        }
        .center {
          flex: 1;
          margin-left: 30rpx;
          .top {
            margin-top: -10rpx;
            .first {
              font-size: 18rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #3d3d3d;
              // line-height: 24rpx;
            }
            .last {
              font-size: 16rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #3d3d3d;
              margin-left: 20rpx;
            }
          }
          .bottom {
            font-size: 18rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #939393;
            margin-top: 12rpx;
          }
        }
        .right {
          margin-right: 28rpx;
        }
      }
    }
    .main {
      margin-top: 18rpx;
      width: 100%;
      padding: 20rpx 22rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      .title {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #111111;
      }
      .box {
        width: 100%;
        height: 160rpx;
        display: flex;
        margin-top: 34rpx;
        margin-bottom: 26rpx;
        img {
          width: 160rpx;
          height: 160rpx;
        }
        .right_box {
          margin-left: 23rpx;
          flex: 1;
          .biaoti {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 700;
            color: #111111;
          }
          .biaoqian {
            margin-top: 6rpx;
            margin-bottom: 9rpx;
            .biaoqian_box {
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              opacity: 1;
              border: 1rpx solid #d5c7ff;
              padding: 7rpx;
              font-size: 18rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 400;
              color: #d5c7ff;
              margin-right: 12rpx;
              display: inline-block;
              box-sizing: border-box;
            }
          }
          .shuoming {
            font-size: 18rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
          }
          .price_line {
            display: flex;
            justify-content: space-between;
            .price {
              .fuhao {
                font-size: 28rpx;
                font-family: Source Han Sans CN-Normal, Source Han Sans CN;
                font-weight: 350;
                color: #de3249;
              }
              .price_num {
                font-size: 28rpx;
                font-family: DIN-Bold;
                font-weight: 700;
                color: #de3249;
              }
            }
            .shu_box {
              box-sizing: border-box;
              padding: 0 24rpx;
              background: #ffffff;
              border-radius: 214rpx 214rpx 214rpx 214rpx;
              opacity: 1;
              border: 1rpx solid rgba(204, 204, 204, 0.6);
              text-align: center;
              line-height: 32rpx;
              .fuhao {
                font-size: 20rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 400;
                color: #3d3d3d;
              }
              .shuliang {
                font-size: 24rpx;
                font-family: Oswald-Regular, Oswald;
                font-weight: 700;
                color: #3d3d3d;
              }
            }
          }
        }
      }
      .line {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 26rpx;
        .left {
          font-size: 20rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #111111;
        }
        .right {
          font-size: 18rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
          .icon {
            margin-left: 20rpx;
          }
        }
      }
      .beizhu {
        display: flex;
        width: 100%;
        height: 40rpx;
        align-items: center;
        margin-bottom: 26rpx;
        .left {
          font-size: 20rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #111111;
          margin-right: 44rpx;
        }
        /deep/ input {
          font-size: 18rpx;
          flex: 1;
        }
      }
      .bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 26rpx;
        .xiaoji {
          font-size: 16rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #111111;
          margin-right: 30rpx;
        }
        .fuhao {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #de3249;
        }
        .price {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 700;
          color: #de3249;
        }
      }
    }
    .shuoming_box {
      width: 640rpx;
      height: 129rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      margin-top: 18rpx;
      .title {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #111111;
        margin-left: 22rpx;
        height: 50rpx;
        line-height: 50rpx;
      }
      .text {
        width: 100%;
        height: 69rpx;
        padding-left: 62rpx;
        padding-right: 22rpx;
        padding-bottom: 16rpx;
        font-size: 18rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 30rpx;
      }
    }
    .mustKnow {
      height: 36rpx;
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 18rpx;
      .left {
        font-size: 22rpx;
        font-family: PingFangSC-Light-Regular, PingFangSC-Light;
        font-weight: 400;
        color: #646465;
      }
      .right {
        font-size: 22rpx;
        font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
        font-weight: 400;
        color: #111111;
      }
    }
  }
  .pay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    padding-right: 24rpx;
    .heji {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #111111;
      margin-right: 16rpx;
    }
    .fuhao {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #de3249;
    }
    .sum_price {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 700;
      color: #de3249;
    }
    .pay_btn {
      width: 207rpx;
      height: 76rpx;
      background: #a084f0;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 76rpx;
      text-align: center;
      margin-left: 50rpx;
    }
    .quePay_btn {
      width: 207rpx;
      height: 76rpx;
      background: #2ce174;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 76rpx;
      text-align: center;
      margin-left: 50rpx;
    }
  }
}
</style>
